/******************************************************************************
* File description: ResultGuidanceTable.qml
* Function: 实验结果：指导下游建议表格
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-27
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Qt.labs.qmlmodels 1.0

Item {
    id: root

    /* property 定义开始 */
    // 表格数据
    property var tableModels: []

    // 私有属性
    property int _originX: 0 // 原始X坐标，判定表格左右滑动
    property var _horHeaderData: ["序号", "孔位", "样本名称", "样本类型", "荧光染料", "CT值",
        "样本浓度\nng/μl", "总浓度\nng/μl", "男性浓度\nng/μl", "女性浓度\nng/μl",
        "男女浓度\n比例 ng/μl", "降解指数DI", "抑制指数ICS", "检测方案", "稀释方案\n样本体积μl",
        "稀释方案\n稀释液体积μl", "扩增上样体积μl", "备注"];
    property var _horHeaderColorMap: ["#FFFFFFFF", "#FFEBEDFF", "#FFE5FFE8"] // 表头颜色映射列表
    property int _horHeaderWidth: -1 // 记录初始宽度
    property int _horHeaderHeight: 58
    property var _horColumnMinWidth: [] // 记录每列最小宽度
    property int _tableItemHeight: 40
    property var _tableItemWidth: [] // 记录每列宽度
    property var _tableModel: tableModels

    // 列过滤数组
    property var _filterList: [""] // 默认有个检测类型

    // 窗口尺寸
    property int _windowWidth: 0

    // checked控制标志
    property bool _isCheckedTriggered: false

    // 信号
    signal windowWidthChanged() // 窗口尺寸更新
    signal tableItemWidthListFinished(); // 在调增窗口宽度后，每列宽度记录完毕
    signal updateTableColumn() // 更新表格列尺寸
    signal updateWindow2RefreshUI() // 通过更改窗口大小刷新UI

    // 函数
    // 列过滤槽函数
    function columnFilter(filterList){
        _filterList = filterList // 更新过滤数组
        _isCheckedTriggered = true // checked触发
        // 触发窗口宽度变化信号：更新表格宽高
        root.updateTableColumn()
    }

    // 重置表格位置槽函数
    function resetTableViewPosition(posX, posY){
        if(posX !== undefined && posX !== null){
            tableContent.contentX = posX
        }
        if(posY !== undefined && posY !== null){
            tableContent.contentY = posY
        }
    }

    /* property 定义结束 */

    Item {
        id: container
        anchors.fill: parent

        // 表头部分
        // 横向表头
        Item {
            id: horHeaderFlickable
            height: _horHeaderHeight
            anchors {
                left: parent.left
                right: parent.right
                top: parent.top
            }
            clip: true

            Item {
                id: horizontalHeader
                height: parent.height
                x: _originX
                y: 0

                Row {
                    id: horHeaderRowLayout
                    spacing: 0

                    Repeater {
                        id: horHeaderItemRepeater
                        model: _horHeaderData

                        Item {
                            id: horheaderItem
                            width: horHeaderText.width
                            height: horizontalHeader.height

                            Rectangle {
                                id: horHeaderBg
                                anchors.fill: parent
                                border.width: 0
                                color: index < 5 ? _horHeaderColorMap[0] :
                                                   index < 11 ? _horHeaderColorMap[1] :
                                                                _horHeaderColorMap[2]
                                clip: true

                                Text {
                                    id: horHeaderText
                                    text: qsTr(modelData)
                                    anchors.centerIn: parent
                                    font.pixelSize: 14
                                    font.family: "Alibaba PuHuiTi"
                                    color: "#FF222222"
                                    horizontalAlignment: Text.AlignHCenter
                                    leftPadding: 15
                                    rightPadding: 15
                                }
                            }

                            // 画边框
                            Canvas {
                                id: horHeaderCanvas
                                antialiasing: true
                                anchors.fill: parent
                                onPaint: {
                                    var ctx = getContext("2d")
                                    ctx.clearRect(0, 0, width, height)
                                    ctx.strokeStyle = "#FF999999"
                                    ctx.lineWidth = 2
                                    ctx.beginPath()

                                    // 下边框
                                    ctx.moveTo(0, height)
                                    ctx.lineTo(width, height)
                                    ctx.stroke()
                                }
                            }

                            // 事件
                            Connections {
                                target: root

                                // 窗口大小变化
                                function onUpdateTableColumn(){
                                    // 如果某列在过滤数组中，则宽度置为0
                                    if(_filterList.indexOf(_horHeaderData[index]) !== -1){
                                        _tableItemWidth.push(0)
                                    }
                                    else {
                                        // 窗口宽度大于表头初始宽度，均分
                                        if(_windowWidth > _horHeaderWidth){
                                            _tableItemWidth.push(
                                                        _windowWidth / (_horHeaderData.length - _filterList.length))
                                        }
                                        // 小于表头初始宽度，表头设置最小宽度，滚动
                                        else {
                                            _tableItemWidth.push(horHeaderText.width)
                                        }
                                    }

                                    // 列宽度数组记录完毕
                                    if(index === _horHeaderData.length - 1){
                                        // console.log(index, _horHeaderData.length)#FF222222
                                        // 更新视图
                                        root.tableItemWidthListFinished()
                                        // 如果为过滤触发
                                        if(_isCheckedTriggered) {
                                            _isCheckedTriggered = false
                                            root.updateWindow2RefreshUI() // 更改大小刷新UI
                                        }
                                    }
                                }

                                // 列宽度记录完成，更新列宽度
                                function onTableItemWidthListFinished(){
                                    // console.log("列宽度执行", index)
                                    horheaderItem.width = _tableItemWidth[index]
                                }
                            }

                            // 组件加载完成，记录初始列宽和每列最小宽度
                            Component.onCompleted: {
                                _tableItemWidth.push(horHeaderText.width)
                                _horColumnMinWidth.push(horHeaderText.width)
                            }
                        }
                    }

                    // 事件
                    Component.onCompleted: {
                        _horHeaderWidth = width
                    }
                }
            }
        }

        // 表格部分
        TableView {
            id: tableContent
            height: parent.height - horHeaderFlickable.height
            anchors {
                left: parent.left
                right: parent.right
                top: parent.top
                topMargin: _horHeaderHeight
            }
            clip: true
            boundsBehavior: Flickable.StopAtBounds
            columnSpacing: 0
            rowSpacing: 0

            columnWidthProvider: function(column){
                return _tableItemWidth[column]
            }

            rowHeightProvider: function(row){
                return _tableItemHeight
            }

            model: TableModel {
                id: tableModel

                TableModelColumn {display: "序号"}
                TableModelColumn {display: "孔位"}
                TableModelColumn {display: "样本名称"}
                TableModelColumn {display: "样本类型"}
                TableModelColumn {display: "荧光染料"}
                TableModelColumn {display: "CT值"}
                TableModelColumn {display: "样本浓度ng/μl"}
                TableModelColumn {display: "总浓度ng/μl"}
                TableModelColumn {display: "男性浓度ng/μl"}
                TableModelColumn {display: "女性浓度ng/μl"}
                TableModelColumn {display: "男女浓度比例"}
                TableModelColumn {display: "降解指数DI"}
                TableModelColumn {display: "抑制指数ICS"}
                TableModelColumn {display: "检测方案"}
                TableModelColumn {display: "稀释方案 样本体积μl"}
                TableModelColumn {display: "稀释方案 稀释液体积μl"}
                TableModelColumn {display: "扩增上样体积μl"}
                TableModelColumn {display: "备注"}

                rows: _tableModel
            }

            delegate: Rectangle {
                id: tableDelegate
                color: "transparent"
                width: tableContent.columnWidthProvider(column)
                height: tableContent.rowHeightProvider(0)
                implicitWidth: tableItem.width
                border.width: 0
                clip: true

                Label {
                    id: tableItem
                    anchors.fill: parent
                    font.family: "Alibaba PuHuiTi"
                    font.pixelSize: 14
                    color: "#FF222222"
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: qsTr(display && (typeof display === "string") ? display : "")
                    antialiasing: true
                    clip: true
                    elide: Text.ElideRight

                    // 文本过长，显示ToolTips
                    Label {
                        id: innerTableItem
                        visible: false
                        text: parent.text
                    }

                    ToolTip {
                        id: tooltip
                        visible: innerTableItem.width > tableItem.width &&
                                 itemDeleMouseArea.containsMouse
                        x: 0
                        y: tableDelegate.height
                        z: 999
                        text: parent.text
                        font: parent.font
                    }
                }

                // 下边框
                Canvas {
                    anchors.fill: parent
                    antialiasing: true
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.strokeStyle = "#FF999999"
                        ctx.lineWidth = 2
                        // 下边框
                        ctx.moveTo(0, height)
                        ctx.lineTo(width, height)
                        ctx.stroke()
                    }
                }

                // 左边框
                Canvas {
                    anchors.fill: parent
                    visible: column !== 0
                    antialiasing: true
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.strokeStyle = "#FF999999"
                        ctx.lineWidth = 2
                        // 左边框
                        ctx.moveTo(0, 0)
                        ctx.lineTo(0, height)
                        ctx.stroke()
                    }
                }

                // 鼠标事件
                MouseArea {
                    id: itemDeleMouseArea
                    anchors.fill: parent
                    hoverEnabled: true
                }
            }

            // 事件
            onHeightChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            //使列表头(横向表头)跟随表格移动
            onContentXChanged: {
                horizontalHeader.x = _originX -
                        (tableContent.contentX - tableContent.originX);
            }

            // 槽函数
            Connections {
                target: root

                // 列宽度记录完成，更新列宽度
                function onTableItemWidthListFinished(){
                    // console.log("forceLayout()")
                    tableContent.forceLayout() // 强制重新布局刷新视图
                }
            }
        }

        Component.onCompleted: {
            _windowWidth = width // 记录窗口尺寸
        }

        // 事件
        onWidthChanged: {
            // console.log("宽度变化")
            _windowWidth = width // 记录窗口尺寸
            // 发射信号
            root.windowWidthChanged() // 更新表格尺寸
        }

        // 槽函数
        Connections {
            target: root

            // 更新表格尺寸
            function onWindowWidthChanged(){
                _tableItemWidth.length = 0 // 清空宽度数组
                _horHeaderWidth = 0 // 表头宽度清0
                // 计算最小表头宽度
                for(let i = 0; i < _horHeaderData.length; i++){
                    // 如果过滤列表中不存在
                    if(_filterList.indexOf(_horHeaderData[i]) === -1){
                        _horHeaderWidth += _horColumnMinWidth[i] // 计入表头宽度
                    }
                }
                root.updateTableColumn() // 更新表格尺寸
            }
        }
    }
}

